<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页三</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="/static/component/layui/css/layui.css" media="all">
        <style>
			.top-panel {
				border-radius: 4px;
				text-align: center;
			}

			.top-panel>.layui-card-body {
				height: 60px;
			}

			.top-panel-number {
				line-height: 60px;
				font-size: 30px;
				border-right: 1px solid #eceff9;
			}

			.top-panel-tips {
				padding-left: 8px;
				padding-top: 16px;
				line-height: 30px;
				font-size: 12px
			}

			.pear-container {
				background-color: whitesmoke;
				margin: 10px;
			}

			.card {
				width: 100%;
				height: 160px;
				background-color: whitesmoke;
				border-radius: 4px;
			}

			.card .header .avatar {
				width: 28px;
				height: 28px;
				margin: 20px;
				border-radius: 50px;
			}

			.card .header {
				color: dimgray;
			}

			.card .body {
				color: gray;
			}

			.card .body {
				margin-left: 20px;
				margin-right: 20px;
			}

			.card .footer {
				margin-left: 20px;
				margin-right: 20px;
				margin-top: 20px;
				font-size: 13px;
				color: gray;
				position: absolute;
			}
			
			.list .list-item{
			       height: 33px;
				   line-height: 33px;
				   color: gray;
				   padding: 5px;
				   padding-left: 15px;
				   border-radius: 4px;
				   margin-top: 5.2px;
			}
			
			.custom-tab .layui-tab-title{
			       border-bottom-width: 0px; 
			       border-bottom-style: none;
			}
			.custom-tab .layui-tab-title li{
		      	   margin-left: 10px;
			}
			
			.list .list-item:hover{
				background-color: whitesmoke;
			}
			
			
			.list .list-item .title{
				font-size:13px;
				width: 100%;
			}
			.list .list-item .footer{
				position: absolute;
				right: 30px;
				font-size: 12px;
			}
			
			.top-panel-tips i {
			
				font-size: 33px;
			}
		
		</style>
	</head>
	<body class="pear-container">
		<div>
            <div class="layui-row layui-col-space10">
				<div class="layui-col-xs6 layui-col-md3">
                    <div class="layui-card top-panel">
						<div class="layui-card-header">今日访问</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
									<<< visitCount >>>
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-app" style="color: #4099FF;"></i>
								</div>
							</div>
						</div>
					</div>
                </div>
				<div class="layui-col-xs6 layui-col-md3">
                    <div class="layui-card top-panel">
						<div class="layui-card-header">文章数量</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
									<<< articleCount >>>
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-component" style="color: #DD4A68;"></i>
								</div>
							</div>
						</div>
					</div>
                </div>
				<div class="layui-col-xs6 layui-col-md3">
                    <div class="layui-card top-panel">
						<div class="layui-card-header">资源数量</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
									<<< resourceCount >>>
								</div>
								<div class="layui-col-xs4 layui-col-md4  top-panel-tips">
								   <i class="layui-icon layui-icon-carousel" style="color: #5FB878;"></i>
								</div>
							</div>
						</div>
					</div>
                </div>
				<div class="layui-col-xs6 layui-col-md3">
                    <div class="layui-card top-panel">
						<div class="layui-card-header">资源大小</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
									<<< HumanReadByte resourceAllSize >>>
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
								    <i class="layui-icon layui-icon-cart" style="color: #E6A23C;"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md9">
					<div class="layui-card">
						<div class="layui-card-body">

							<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
							  <ul class="layui-tab-title">
							    <li class="layui-this">项目列表</li>
							    <li>数据统计</li>
							  </ul>
							  <div class="layui-tab-content">
								  <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
							  </div>
							</div>
						</div>
					</div>
				</div>
			</div>
        </div>
		<!--</div>-->
		<script src="/static/component/layui/layui.js" charset="utf-8"></script>
		<script>
		    layui.use(['layer', 'echarts','element'], function () {
		        var $ = layui.jquery,
		            layer = layui.layer,
					element = layui.element,
		            echarts = layui.echarts;
	
		        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
		
		        var optionRecords = {
		            title: {
		                text: ''
		            },
		            tooltip: {
		                trigger: 'axis',
		                axisPointer: {
		                    type: 'cross',
		                    label: {
		                        backgroundColor: '#6a7985'
		                    }
		                }
		            },
		            legend: {
		                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
		            },
		            toolbox: {
		                feature: {
		                    saveAsImage: {}
		                }
		            },
		            grid: {
		                left: '3%',
		                right: '4%',
		                bottom: '3%',
		                containLabel: true
		            },
		            xAxis: [
		                {
		                    type: 'category',
		                    boundaryGap: false,
		                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		                }
		            ],
		            yAxis: [
		                {
		                    type: 'value'
		                }
		            ],
		            series: [
		                {
		                    name: '邮件营销',
		                    type: 'line',
		                    stack: '总量',
		                    areaStyle: {},
		                    data: [120, 132, 101, 134, 90, 230, 210]
		                },
		                {
		                    name: '联盟广告',
		                    type: 'line',
		                    areaStyle: {},
		                    data: [220, 182, 200, 234, 290, 330, 310]
		                },
		                {
		                    name: '视频广告',
		                    type: 'line',
		                    stack: '总量',
		                    areaStyle: {},
		                    data: [900, 600, 450, 599, 650, 750, 900]
		                },
		                {
		                    name: '直接访问',
		                    type: 'line',
		                    stack: '总量',
		                    areaStyle: {},
		                    data: [600, 454, 545, 699, 899, 1000, 1100]
		                },
		                {
		                    name: '搜索引擎',
		                    type: 'line',
		                    stack: '总量',
		                    label: {
		                        normal: {
		                            show: true,
		                            position: 'top'
		                        }
		                    },
		                    areaStyle: {},
		                    data: [820, 932, 901, 934, 1290, 1330, 1320]
		                }
		            ]
		        };
		        echartsRecords.setOption(optionRecords);
		
		        window.onresize = function () {
		            echartsRecords.resize();
		        }
		
		    });
		</script>
	</body>
</html>
